<template>
	<view>
		<map
			style="width: 100%; height:calc(100vh);"
			:circles="circles"
			:polyline="polyline"
			:scale="scale"
			:latitude="latitude"
			:longitude="longitude"
			:markers="markers"
			:enable-3D="true"
			:show-compass="true"
			:enable-overlooking="true"
			:enable-traffic="true"
			@markertap="markertap"
		></map>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '项目地点',
			latitude: 36.67645, // 中心坐标
			longitude: 117.09641, // 中心坐标
			scale: 14, //地图层级
			// 点坐标
			markers: [
				{
					title: '',
					id: 0,
					latitude: '',
					longitude: '',
					iconPath: '/static/images/map/address.png',
					width: 27,
					height: 30,
					callout: {
						//自定义标记点上方的气泡窗口 点击有效
						content: '',
						color: '#000000',
						fontSize: 12,
						borderRadius: 5,
						padding: 10,
						display: 'ALWAYS'
					}
				},
				{
					title: '我的位置',
					id: 1,
					latitude: '',
					longitude: '',
					iconPath: '/static/images/map/people.png',
					width: 30,
					height: 30
				}
			],
			// 画圆
			circles: [
				{
					//在地图上显示圆
					latitude: '',
					longitude: '',
					opacity: 0.5,
					fillColor: '#0f0f0f0f', //填充颜色 #0f0f0f0f
					color: '#999999AA', //描边的颜色
					radius: 1000, //半径(米)
					strokeWidth: 1 //描边的宽度
				}
			],
			// 画线
			polyline: [
				{
					//指定一系列坐标点，从数组第一项连线至最后一项
					points: [
						{
							latitude: '',
							longitude: ''
						},
						{
							latitude: '',
							longitude: ''
						}
					],
					color: '#1577EE', //线的颜色
					width: 3, //线的宽度
					dottedLine: true, //是否虚线
					arrowLine: true //带箭头的线 开发者工具暂不支持该属性
				}
			]
		};
	},
	onLoad(e) {
		let coordinate = JSON.parse(e.coordinate);
		
		// 地图中心
		this.latitude = coordinate.projectLatitude;
		this.longitude = coordinate.projectLongitude;
		
		// 项目地点
		this.markers[0].latitude = coordinate.projectLatitude;
		this.markers[0].longitude = coordinate.projectLongitude;
		this.markers[0].callout.content = coordinate.projectName;
		
		// 以项目为中心画圆
		this.circles[0].latitude = coordinate.projectLatitude;
		this.circles[0].longitude = coordinate.projectLongitude;
		this.circles[0].radius = coordinate.faceRecognitionRange;
		
		// 个人当前位置
		this.markers[1].latitude = coordinate.nowLatitude;
		this.markers[1].longitude = coordinate.nowLongitude;
		
		// 俩点之间连线
		this.polyline[0].points[0].latitude = coordinate.nowLatitude;
		this.polyline[0].points[0].longitude = coordinate.nowLongitude;
		this.polyline[0].points[1].latitude = coordinate.projectLatitude;
		this.polyline[0].points[1].longitude = coordinate.projectLongitude;
	},
	methods: {
		markertap() {
			// console.log('markertap');
		}
	}
};
</script>
